<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .foot-box{
            width: 100%;
            height: 3.12rem;
            border: 1px solid black;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .foot-box li{

        }
    </style>
</head>
<body>
    <ul class="footer-box">
        <li>首页</li>
        <li>分类</li>
        <li>购物车</li>
        <li>我的</li>
    </ul>
</body>
</html>
<!-- 

    dbserve??
    11:41

    数据修改后必须要渲染    更新才有用

    $nextTick等价于img引起的updated
    其他数据改了之后不会引起

    深入响应式的原理
    当数据改变时，并不会立即更新dom二十回把数据引起的dom更新放在异步队列里进行排队
    队列就和我们生活中的排队一样
    等到下次时间循环 更新队列时候，才会执行队列里的代码,进行dom的处理，这样意味着程序员没法在数据更新后，使用更新后的dom.所以vue提供了一个$nextTick()，只需要程序员把操作新domde 的代码传给$nectTick，它的内部会在dom更新后

    例如：在这里写
    <p id="p01">{{msg}}</p>
        data(){
            return {
                msg:"hi"

            }
        },
        methods:{
            changeMsg(){
                this.msg +="1"

            }
        }
    
        数据更新不会立即更新dom
        数据遍历以后再updata()里面拿到新的dom
        beforeupdata()里面是旧的
        this.$nextTick(()=>{})
        为什么不能放在updata里面？？？


 -->
